<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    modelValue: Boolean,
    zIndex: { type: Number, default: 98 },
  },
  emits: {
    "update:modelValue": (value: boolean) => typeof value === "boolean",
  },
  setup(props, ctx) {
    const overlayClick = () => {
      ctx.emit("update:modelValue", false);
    };
    return { overlayClick };
  },
});
</script>

<template>
  <uni-transition
    :show="modelValue"
    mode-class="fade"
    :styles="{
      position: 'fixed',
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(0, 0, 0, 0.4)',
      zIndex,
    }"
    @click="overlayClick"
    @touchmove.stop
  />
</template>